<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for用法</title>
  <style>
    table{
      text-align: center;
    }
    .first{
      height: 35px;
      background-color: lightyellow;
      color:blue;
    }
    a{
      text-decoration: none;
    }
    a:hover{
      color:red;
      text-decoration: underline;
    }
  </style>
  <script src="./vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1 style="text-align: center;">商品管理系统Vue3.0版<hr style="height:2px;" color="#ddd"></h1>
    <table align="center" border="3" cellspacing="0"
           bordercolor="#aaa" width="800px" rules="rows" >
      <tr align="left" bgcolor="#ffc0cb" height="40px" >
        <td colspan="6" style="padding-left:5px;">
          <!--功能：根据价格区间和商品名称进行筛选-->
          <form action="">
            {{productSearch}} <br>
          <input type="text" placeholder="商品关键字" v-model="productSearch.pname">
          <input type="text" placeholder="价格起始区间" v-model="productSearch.price1">
          <input type="text" placeholder="价格结束区间" v-model="productSearch.price2">
          <input type="button" value="开始查询" @click="searchProduct">
          </form>
        </td>
      </tr>
      <tr class="first">
        <td>商品编号</td>
        <td>商品名称</td>
        <td>商品单价</td>
        <td>商品数量</td>
        <td>小计(￥)</td>
        <td>操作</td>
      </tr>
      <tr v-for="p in products" :key="p.pid" height="30px">
        <td>{{p.pid}}</td>
        <td>{{p.pname}}</td>
        <td>{{p.price}}</td>
        <td>{{p.num}}</td>
        <td>{{p.price * p.num}}</td>
        <td>
          <a href="javascript:;" >修改</a> &nbsp;
          <a href="javascript:;" @click="deleteProduct(p.pid)">删除</a>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>
<script>
  const { createApp, ref,reactive } = Vue
  let vs = createApp({
    setup() {
      let products = ref([])
      let productSearch = {price1:1,price2:20000}
      function init(){
        products.value = [
          {"pid":1001,"pname":"飘柔洗发水","price":40,"num":20},
          {"pid":1002,"pname":"ThinkPad X1电脑","price":12000,"num":5},
          {"pid":1003,"pname":"格力空调","price":5000,"num":12},
          {"pid":1004,"pname":"小米手机","price":3500,"num":15},
          {"pid":1005,"pname":"七匹狼外套","price":1200,"num":10},
          {"pid":1006,"pname":"华为电脑","price":10000,"num":6},
          {"pid":1007,"pname":"联想电脑","price":8000,"num":10},
          {"pid":1008,"pname":"HP电脑","price":8500,"num":9},
          {"pid":1009,"pname":"ViVO手机","price":2800,"num":8},
          {"pid":1010,"pname":"美的空调","price":4300,"num":25},
        ]
      }
      // 1. 搜索商品
      function searchProduct(){
        // 1.0 恢复原来所有商品的数据
        init()
        // 1.1 根据过滤条件查询商品列表
        // ① 定义数组存放查询到的数据
        let productList = []
        // ② 开始查询
        products.value.forEach(p => {
          if (p.pname.includes(productSearch.pname) &&
            (p.price >= productSearch.price1 && p.price <= productSearch.price2)){
            productList.push(p)
          }
        })
        console.log(productList)
        products.value = productList
      }
      // 2. 删除商品
      function deleteProduct(pid){
        // 2.1 根据商品id查找出商品在原数组中的下标
        // 方法一：(findIndex: es6提供的方法)
        let index = this.products.findIndex(p => p.pid === pid)
        console.log("index:",index)
        // 2.2 再删除商品
        if (confirm(`你真的要删除编号为${pid}的商品吗?`)){
          products.value.splice(index,1)             // 参数1：要删除的元素在数组中的下标 参数2：删除的个数
        }
      }
      init()
      // 下面放的是模型区域(不论是变量还是自定义函数都要在此注册)
      return {
        productSearch,
        products,
        init,
        searchProduct,
        deleteProduct
      }

    }
  }).mount('#app')
</script>
